<template>
	<!-- 角色群组维护 -->
	<div>
		<v-card>
			<v-card-title>
				<v-btn class="ml-2" small tile color="primary" @click="editGroupRoleDialog=true">
					添加角色组
				</v-btn>

				<v-divider class="mx-4" inset vertical></v-divider>

				<v-row class="mt-2">
					<v-col cols="12" sm="3" md="2">
						<v-text-field label="角色组名称" v-model="roleGroupQuery.name" dense outlined>
						</v-text-field>
					</v-col> 
					<v-col>
					<v-btn  color="primary" @click="search">查询</v-btn>
					<v-btn class="ml-3" depressed color="primary" @click="refreshApps">
						刷新</v-btn>
					</v-col>
				</v-row>
			</v-card-title>
			<v-data-table :headers="roleGroupHeaderList" :items="roleGroupDataList" small fixed-header item-key="id"
				dense class="text-no-wrap" show-select loading-text="正在加载请稍等......" :loading="roleGroupLoading"
				:options.sync="roleGroupOptions" :footer-props="vuetifyDefaultPage"
				:server-items-length="roleGroupTotalCount">
				<template v-slot:item.issystemgenerated="{ item }">
					<a v-if="item.issystemgenerated" style="color: #67C23A;">是</a>
					<a v-else>否</a>
				</template>
				<template v-slot:item.actions="{ item }">
					<div>
						<v-btn small tile color="primary" @click="editGroupRoleDialog=true, roleGroupModel=item">
							编辑角色组
						</v-btn>
						<v-btn class="ml-2" small tile color="primary" @click="openSetActionClick(item)">
							分配角色组权限
						</v-btn>
						<v-btn class="ml-2" :disabled="item.issystemgenerated" small tile color="red" @click="deleteRoleGroupClick(item)">
							删除角色组
						</v-btn>
					</div>
				</template>
			</v-data-table>
		</v-card>

		<v-dialog v-model="editGroupRoleDialog" max-width="800px">
			<v-card>
				<v-card-title>{{roleGroupModel.id===undefined?'添加角色组':'编辑角色组'}}</v-card-title>
				<v-card-text>
					<v-row>
						<v-col cols="12">
							<v-text-field label="角色组名称" v-model="roleGroupModel.name" dense outlined>
							</v-text-field>
						</v-col>
						<v-col cols="12">
							<v-textarea outlined name="input-7-4" label="备注" v-model="roleGroupModel.description"
								:value="roleGroupModel.description"></v-textarea>
						</v-col>
					</v-row>
				</v-card-text>
				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn color="success" text class="mr-4" @click="editRoleGroupSubmit">确认</v-btn>
					<v-btn color="warning" text class="mr-4" @click="close">取消</v-btn>
				</v-card-actions>
				</v-card-actions>
			</v-card>
		</v-dialog>
		<setaction :setActionModel="setActionModel"></setaction>
	</div>
</template>

<script>
	import setaction from './set_action.vue'
	export default {
		name: 'role_group_maintenance',
		components: {
			setaction
		},
		data: () => ({
			setActionModel: {
				setActionDialog: false,
				roleGroupId: 0,
			},
			roleGroupQuery: {
				name: '',
			},
			roleGroupHeaderList: [{
					text: '操作',
					align: 'center',
					value: 'actions',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '是否系统生成',
					align: 'center',
					value: 'issystemgenerated',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '角色组名称',
					align: 'center',
					value: 'name',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '角色组描述',
					align: 'center',
					value: 'description',
					filterable: false,
					class: 'fixed'
				}
			],
			roleGroupDataList: [],
			roleGroupTotalCount: 0,
			roleGroupLoading: true,
			roleGroupOptions: { //页数
				page: 1,
				//每页行数
				itemsPerPage: 10
			},
			vuetifyDefaultPage: {
				'items-per-page-text': '每页个数',
				'items-per-page-options': [10, 20, 50, 100]
				// 'items-per-page-all-text': '100'
			},
			editGroupRoleDialog: false,
			roleGroupModel: {},
		}),
		watch: {
			roleGroupOptions: {
				handler() {
					this.search()
				},
				deep: true
			},
		},

		methods: {
			async search() {
				this.roleGroupLoading = true
				var response = await this.$httpRequest({
					url: `SPM/Role/LoadRoleGroupPage?
						name=${this.roleGroupQuery.name}&
						pageNumber=${this.roleGroupOptions.page}&
						pageSize=${this.roleGroupOptions.itemsPerPage}`,
					method: 'get',
				})
				if (response.status == 1) {
					this.roleGroupDataList = response.data.result
					this.roleGroupTotalCount = response.data.pagination.totalRecords
					this.roleGroupLoading = false
				} else {
					this.$message.error(response.info)
				}
			},
			async refreshApps() {
				this.roleGroupQuery.name = ''

				await this.search()
			},
			close() {
				this.roleGroupModel = {}
				this.editGroupRoleDialog = false
			},
			//添加或编辑角色基本信息
			async editRoleGroupSubmit() {
				var url = ''
				if (this.roleGroupModel.id === undefined) {
					url = `SPM/Role/AddRoleGroup`
				} else {
					url = `SPM/Role/UpdateRoleGroup`
				}
				var response = await this.$httpRequest({
					url: url,
					method: 'post',
					data: this.roleGroupModel
				})
				if (response.status == 1) {
					this.roleGroupModel = {}
					this.$message.success(response.info)
					this.editGroupRoleDialog = false
					await this.search()
				} else {
					this.$message.error(response.info)
				}
			},
			async deleteRoleGroupClick(item) {
				
				var response = await this.$httpRequest({
					url: `SPM/Role/DeleteRoleGroup/${item.id}`,
					method: 'delete'
				})
				if (response.status == 1) {
					this.$message.success(response.info)
					await this.search()
				} else {
					this.$message.error(response.info)
				}
			},
			openSetActionClick(item) {
				this.setActionModel.setActionDialog = true
				this.setActionModel.roleGroupId = item.id

			},

		}
	}
</script>

<style>
</style>
